<template>
    <view class="order-info-item">
        <text class="label">{{ label }}:</text>
        <view class="value-box">
            <view class="value" v-if="!showMore" v-for="(item, index) in [value[0]]" @click="copy(item)"
                ><text>{{ item }}</text
                ><text class="copy">复制</text></view
            >
            <view class="value" v-else v-for="(item, index) in value" @click="copy(item)"
                ><text>{{ item }}</text
                ><text class="copy">复制</text></view
            >
        </view>
        <view class="show-more-box" v-if="hasMore" @click="showMore = !showMore">
            <uni-icons size="36" :type="showMore ? 'arrowup' : 'arrowdown'"></uni-icons>
        </view>
    </view>
</template>

<script>
import { copyFn } from "@/uni-sub-base/utils/utils.js"
export default {
    props: {
        label: {
            type: String,
            default: "",
        },
        value: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            showMore: false,
            hasMore: false,
        }
    },
    mounted() {
        this.hasMore = this.value.length > 1
    },
    methods: {
        copy(text) {
            copyFn(text)
        },
    },
}
</script>

<style lang="scss">
.order-info-item {
    flex: 1;
    padding: 14rpx $app-page-padding;
    display: flex;
    flex-direction: row;

    text {
        font-size: $font-size-28;
    }
    .label {
        color: $app-color-text-tip;
        margin-right: 10rpx;
        font-size: $font-size-28;
    }
    .value {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: $app-color-text-main;
        margin-bottom: 16rpx;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .value-box {
        flex: 1;
        display: flex;

        flex-direction: column;
    }
    .show-more-box {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
    .order-info-image {
        width: 122rpx;
        height: 122rpx;
    }
    .copy {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88rpx;
        height: 42rpx;
        background: rgba(50, 161, 250, 0.11);
        border-radius: 22rpx;
        color: #32a1ff;
        font-size: 24rpx;
    }
}
</style>
